<template>
  <div class="tab-bar">
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" active-color="#1BB89C" fixed route class="tab-bar-bordert">
      <van-tabbar-item :to="{ path:'/home' }" v-if="utype != 1">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.home_active : icon.home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ path:'/classify' }" v-if="utype != 0">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.type_active : icon.type" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ path:'/controls' }">
        <span>管理</span>
        <template #icon="props">
          <img :src="props.active ? icon.control_active : icon.control" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ path:'/my' }">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my_active : icon.my" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar, TabbarItem);

export default {
  name: 'TabBar',
  data () {
    return {
      utype: '',
      active: this.curr,
      icon: {
        home: require('@/assets/tabbar/home.png'),
        home_active: require('@/assets/tabbar/home_active.png'),
        my: require('@/assets/tabbar/my.png'),
        my_active: require('@/assets/tabbar/my_active.png'),
        type: require('@/assets/tabbar/type.png'),
        type_active: require('@/assets/tabbar/type_active.png'),
        control: require('@/assets/tabbar/control.png'),
        control_active: require('@/assets/tabbar/control_active.png'),
      },
    }
  },
  props: {
    curr: {
      type: Number,
      required: true,
    }
  },
  created () {
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
  },
}
</script>
<style lang="less">
</style>
